<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
<h3>事件对象</h3>
<p>
    事件对象是什么 <br>
    也是个对象，这个对象里有事件触发时的相关信息 <br>
    例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
</p>
<p>
    使用场景 <br>
    可以判断用户按下哪个键，比如按下回车键可以发布新闻 <br>
    可以判断鼠标点击了哪个元素，从而做相应的操作
</p>
<hr>

<h3>获取事件对象</h3>
<p>
    语法：获取对象 <br>
    在事件绑定的回调函数的第一个参数就是事件对象 <br>
    一般命名为event、ev、e
</p>
<pre style="font-size: 20px;">
元素.addEventListener('事件类型', function (e) {  // 这个 e 就是事件对象
}
</pre>
<hr>

<h3>常见事件对象属性 部分常用属性</h3>
<pre style="font-size: 20px;">
type
    获取当前的事件类型
clientX/clientY
    获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
    获取光标相对于当前DOM元素左上角的位置
key
    用户按下的键盘键的值
    现在不提倡使用keyCod
</pre>
<hr>

<button>点击按钮</button>

<label>
    <input type="text">
</label>

<script>
    // 获取 DOM元素
    const 按钮 = document.querySelector('button')
    // 监控鼠标点击
    按钮.addEventListener('click', function (事件对象) {
        console.log(事件对象) // 输出控制台看信息, 是一个 对象类型
    })


    // 获取 DOM元素
    const 输入框=document.querySelector('input')
    // 监控 松开键盘 触发
    输入框.addEventListener('keyup', function (事件对象) {
        console.log(事件对象.key) // 事件对象的属性 key 是键盘键的值, 控制台输出看各个键盘值是多少

        // 判断按下的是否,是 回车键
        if (事件对象.key === 'Enter') {
            输入框.value = '我敲下了回车键' // 输入框里,填文字
        }
    })
</script>
</body>
</html>